<template>
    <div class="singer container">
        <div class="item-box">
            <!-- 标签 -->
            <div class="tags">
                <ul class="tag-lang">
                    <li
                        v-for="item of langs"
                        :key="item.value"
                        :class="lang == item.value ? 'active' : ''"
                        @click="chooseType('lang', item.value)"
                    >
                        {{ item.label }}
                    </li>
                </ul>
                <ul class="tag-lang tag-type">
                    <li
                        v-for="item of classifys"
                        :key="item.value"
                        :class="classify == item.value ? 'active' : ''"
                        @click="chooseType('classify', item.value)"
                    >
                        {{ item.label }}
                    </li>
                </ul>
                <ul class="tag-en">
                    <li
                        v-for="item of ens"
                        :key="item.value"
                        :class="en == item.value ? 'active' : ''"
                        @click="chooseType('en', item.value)"
                    >
                        {{ item.label }}
                    </li>
                </ul>
            </div>
            <load-more @scroll-state="load">
                <div class="singer-list">
                    <singer-item
                        v-for="item of singers"
                        :key="item.id"
                        :item="item"
                    />
                </div>
            </load-more>
            <div v-if="loading">
                <loading />
            </div>
        </div>

    </div>
</template>

<script>
import SingerItem from '@/components/common/singerItem/Index'
import loadMore from '@/components/common/loadMore/Index'
import loading from '@/components/common/loading/Index'
export default {
    data() {
        return {
            // 语种
            lang: -1,
            langs: [
                {
                    value: -1,
                    label: '全部'
                },
                {
                    value: 7,
                    label: '华语'
                },
                {
                    value: 96,
                    label: '欧美'
                },
                {
                    value: 8,
                    label: '日本'
                },
                {
                    value: 16,
                    label: '韩国'
                },
                {
                    value: 0,
                    label: '其他'
                }
            ],
            // 分类
            classify: -1,
            classifys: [
                {
                    value: -1,
                    label: '全部'
                },
                {
                    value: 1,
                    label: '男歌手'
                },
                {
                    value: 2,
                    label: '女歌手'
                },
                {
                    value: 3,
                    label: '乐队'
                }
            ],
            // 字母A_Z
            en: -1,
            ens: [],
            // 请求参数
            params: {
                // 返回数量
                limit: 40,
                // 偏移数量
                offset: 0,
                // 分类
                type: -1,
                // 语种
                area: -1,
                // 字母A_Z
                initial: -1
            },
            // 歌手列表
            singers: [],
            loadStatus: false, //是否还有更多数据
            loading: false // 是否显示加载动画
        }
    },
    components: {
        SingerItem,
        loadMore,
        loading
    },
    created() {
        this.getEn()
        this.getSingerList()
    },
    methods: {
        // 获取筛选列表
        getEn() {
            let ens = []
            for (let i = 0; i < 26; i++) {
                ens.push({
                    value: String.fromCharCode(97 + i),
                    label: String.fromCharCode(65 + i)
                })
            }
            ens.unshift({
                value: -1,
                label: '热门'
            })
            ens.push({
                value: 0,
                label: '其他'
            })
            this.ens = ens
        },
        // 选择歌手分类
        chooseType(type, val) {
            if (type == 'lang') {
                this.lang = val
                this.params.area = val
            } else if (type == 'classify') {
                this.classify = val
                this.params.type = val
            } else if (type == 'en') {
                this.en = val
                this.params.initial = val
            }
            this.params.offset = 0
            this.singers = []
            this.getSingerList()
        },
        // 获取歌手列表
        async getSingerList() {
            const { data: res } = await this.$api.getSingerList(this.params)
            if (res.code !== 200) {
                return this.message.error('获取歌手列表失败！');
            }
            // console.log(res);
            this.singers = this.singers.concat(res.artists)
            if (res.more) {
                this.loading = true
                this.loadStatus = true
                this.params.offset += 40
            } else {
                this.loading = false
            }
        },
        // 加载更多
        load() {
            if (this.loadStatus) {
                setTimeout(() => {
                    this.getSingerList()
                }, 1000)
            }
        }
    },
}
</script>

<style lang="less" scoped>
.singer {
    .tags {
        min-width: 1080px;
        margin: 0 0 30px 10px;
        .tag-lang {
            margin-bottom: 20px;
            li {
                display: inline-block;
                cursor: pointer;
                width: 56px;
                text-align: center;
                line-height: 29px;
                border-radius: 16px;
                margin: 0 10px 10px 0;
                cursor: pointer;
                font-size: 12px;
                color: #161e27;
                &:hover {
                    color: #666;
                }
                &.active {
                    color: #fff;
                    background: #fa2800;
                }
            }
        }
        .tag-en {
            li {
                display: inline-block;
                width: 28px;
                height: 28px;
                margin-right: 14px;
                text-align: center;
                line-height: 29px;
                border-radius: 50%;
                font-size: 13px;
                color: #333333;
                cursor: pointer;
                &:hover {
                    color: #666;
                }
                &.active {
                    color: #fff;
                    background: #fa2800;
                }
                &:first-child,
                &.last-child {
                    width: 56px;
                    border-radius: 14px;
                }
            }
        }
    }
    .singer-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 50px;
        margin: 0px -15px 0;
        min-width: 1080px;
    }
}
</style>